<template>
	<view>
		<view class="formlist inputtext" @tap="salesmanName">
			<view class="formgroup border-bottom-E3E3E5">
				<view class="labletitle" v-if="showLabel">
					<label>{{label}}</label>
					<text class="required" v-show="required">*</text>
				</view>
				<view class="controlvalue">
					<input type="text" v-model="valueTitle" :placeholder="placeholder" disabled="true" />
				</view>
				<view class="advanceicon iconfont icon-xiangyou"></view>
			</view>
		</view>
		<tki-tree ref="tree" :range="posList" rangeKey="fullName" :multiple="tkiTreeData.multiple" :selectParent="tkiTreeData.selectParent"></tki-tree>
	</view>
</template>

<script>
	import tkiTree from '@/components/tki-tree/tki-tree.vue'
	import helper from '@/common/js/helper.js'
	export default {
		components:{
			tkiTree,
		},
		props:{
			value:{
				type:String,
				default(){
					return ''
				}
			},
			disabled:{
				type:Boolean,
				default(){
					return false
				}
			},
			placeholder:{
				type:String,
				default(){
					return '请输入'
				}
			},
			label:{
				type:String,
				default(){
					return '控件标题'
				}
			},
			required:{
				type:Boolean,
				default(){
					return false
				}
			},
			showLabel:{
				type:Boolean,
				default(){
					return true
				}
			},
			jnpfKey:{
				type:String,
				default(){
					return ''
				}
			},
			vModel:{
				type:String,
				default(){
					return ''
				}
			},
			
		},
		data() {
			return {
				tkiTreeData:{
					treeData:[],
					multiple:false,
					selectParent:false,/* 父级可选 */
				},
				valueTitle:'',
				posList:[]
			};
		},
		created() {
			this.handel(this.value)
			
		},
		watch:{
			value(val){
				if(val != null && val != undefined && val != ''){
					
					this.handel(val)
				}
			}
		},
		methods:{
			handel(val){
				this.posList = uni.getStorageSync('posList');
				
				if(this.posList){
					this.tkiTreeData.treeData = this.posList;
					if(val != null && val != undefined){
						let value = this.showTree(this.vModel,'posSelect',val);
						this.valueTitle = value;
						for(let i = 0;i<this.posList.length;i++){
							let children1 = this.posList[i].children;
							if(children1 == null)return
							for(let j = 0;j<children1.length;j++){
								let children2 = children1[j].children;
								if(children2 == null)return
								for(let k = 0;k<children2.length;k++){
									if(children2[k].fullName === this.valueTitle){
										children2[k].checked = true;
									}
									this.tkiTreeData.treeData = this.posList;
								}
							}
						}
					}
				}
			},
			salesmanName(){
				const jnpfKey = this.jnpfKey;
				const vModel = this.vModel;
				this.tkiTreeData.treeData = this.posList;
				this.$refs.tree._show();
				this.$eventHub.$off('treemodality');/* 移除自定义事件监听器 */
				this.$eventHub.$on('treemodality', (data) => {
					let _list = [];
					let id = [];
					data.forEach((items,index)=>{
						_list.push(data[index].fullName)
						id.push(data[index].id)
					})
					this.valueTitle=_list.join()
					this.$emit('input',id.join())
					this.$eventHub.$off('treemodality');/* 移除自定义事件监听器 */
				});
			},
			
			
			/* 回写页面显示tree名称 */
			showTree (model,type,treeId) {
				let treeData = [];
				if(type =="depSelect"){
					treeData = this.depList;
				}else if(type =="comSelect"){
					treeData = comList;
				}else if(type =="userSelect"){
					treeData = this.userList;
				}else if(type == "posSelect"){
					treeData = this.posList;
				}
				let _data =[];
				let _id = treeId.split(",");
				_id.forEach((v, i) => {
					this.getChecked(treeData,v,_data)
				})
				
				let data = _data.toString()
				
				return data;
				
				
			},
			
			 getChecked(treeData,id,_data){
				for(let i=0;i<treeData.length;i++){
					let _id = treeData[i].id;
					if(_id == id){
						_data.push(treeData[i].fullName)
					}
					if(treeData[i].children!=null){
						this.getChecked(treeData[i].children,id,_data)
					}
				}
			},
			/* 回写页面显示tree名称 End */
		}
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
